<template>
  <div class="body">
    <div class="title">居民管理</div>
    <div class="inquire">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="楼栋ID">
          <CascaderSelect style="width: 100px" @changeBuildId="getBuildId" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="Inline.key"
            placeholder="居民姓名"
            class="name"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="Inline.key"
            placeholder="居民电话"
            class="phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input
            v-model="Inline.key"
            placeholder="房间号"
            class="room"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item label="住户类型">
            <el-select
              v-model="Inline.key"
              placeholder="请选择"
              class="type"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="searchlist">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="fun">
      <el-button type="primary" @click="addShow(true)">添加</el-button>

      <el-button type="success" @click="deleteall">批量删除</el-button>
      <el-button type="danger">批量审核</el-button>
    </div>
    <Table
      :loading="loading"
      :tableData="tableData"
      :tableHead="tableHead"
      @updateNotice="addShow"
      @deleteNotice="deleteNotice"
      @multipleSelection="multipleSelection"
    />
    <!-- <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Inline.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="Inline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </div> -->
    <page :total="counts" @changpage="searchlist" />
    <userDialog
      :titleFlag="titleFlag"
      :show="showDialog"
      :updateData="updateData"
      @close="addShow"
    />
  </div>
</template>

<script>
import CascaderSelect from './../components/building/cascader.vue'
import page from "../components/common/page3.vue";
import Table from "../components/common/Table.vue";
import userDialog from "../components/common/userDialog.vue";
import http from "../utils/request";
import { userinfodelete, userinfolist, userinfodeleteall } from "../api/user";
export default {
  components: {
    userDialog,
    Table,
    page,
    CascaderSelect
  },
  data() {
    return {
      loading: false,
      showDialog: false,
      titleFlag: false,
      updateData: {},
      formInline: {
        user: "",
        region: "",
      },
      Inline: {
        pageSize: 2,
        page: 1,
        key: "",
      },
      counts: 0,

      tableData: [],
      tableHead: [
        {
          label: "ID",
          prop: "id",
        },
        {
          label: "头像",
          prop: "photo",
          type: "img",
          // formatter:(row,prop)=>{
          //   return !prop ? 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg'
          //   : this.$config.baseUrl+'/upload/'+prop
          // }
        },
        {
          label: "名字",
          prop: "name",
        },
        {
          label: "楼栋",
          prop: "buildingid",
        },
        
        {
          label: "业主类型",
          prop: "usertypeName",
        },
        {
          label: "性别",
          prop: "sex",
        },
        {
          label: "手机号",
          prop: "mobile",
        },
        {
          label: "身份证",
          prop: "cardid",
        },

        {
          label: "民族",
          prop: "nation",
        },

        {
          label: "状态",
          prop: "stateName",
        },
        {
          label: "操作",
          type: "button",
          button: {
            update: true,
            delete: true,
          },
        },
      ],
      multipleSelectionArr: [],
      counts: 0,
    };
  },
  mounted() {
    this.searchlist();
  },
  methods: {
    /**
     * 显示 隐藏 操作->[添加 修改 关闭 取消 确定]
     * @param show boolean 显示隐藏
     * @param data OBJECT 修改时的数据
     * @param flag Number 控制列表渲染
     */
      getBuildId(id) {
      console.log("buildingid", id);
      this.formline.buildingid = id;
    },
    async deleteall() {
      let self = this;
      if (this.multipleSelectionArr.length == 0) {
        this.$message({
          type: "warning",
          message: "请选者删除人!",
        });
        console.log(this.multipleSelectionArr.length);
      } else {
        let ids = [];
        self.multipleSelectionArr.forEach((item) => {
          ids.push(item.id);
        });
        let res = await userinfodeleteall({
          ids: ids,
        });
        console.log(res);
        if (res.errCode === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        }
        this.searchlist();
      }
    },
    async addShow(show, data, flag) {
      this.showDialog = show;

      if (show) {
        this.titleFlag = !!data;
        if (this.titleFlag) {
          const rel = this.tableData.find((item) => item.id == data.id);
          this.updateData = rel;
        }
        this.searchlist();
      } else {
        flag && this.searchlist();
        this.updateData = {};
      }
    },

    multipleSelection(data) {
      this.multipleSelectionArr = data;
    },
    updateNotice(data) {
      console.log("updateNotice", data);
    },
    deleteNotice(id) {
      let ids = id.id;
      http.get("/api/userinfo/delete?id=" + ids).then((res) => {
        console.log(res);
        console.log(id);
        if (res.errCode === 10000) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.searchlist();
        }
      });
    },
    async searchlist(params) {
      const { data } = await userinfolist(Object.assign(this.Inline, params));
      this.tableData = data.list;
      console.log(data.list.photo);
      this.counts = data.counts;
    },

    handleSizeChange(val) {
      this.Inline.pageSize = val;
      console.log(this.Inline.pageSize);
      this.searchlist();
    },
    handleCurrentChange(val) {
      this.Inline.page = val;
      this.searchlist();
    },
  },
};
</script>

<style lang="less" >
.title {
  color: rgb(77, 119, 196);
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.demo-form-inline {
  padding-left: 20px;
}
.id {
  width: 250px;
}
.name {
  width: 150px;
}
.phone {
  width: 225px;
}
.room {
  width: 150px;
}
.type {
  width: 160px;
}
.fun {
  padding-left: 20px;
  margin-bottom: 20px;
}
.el-table {
  margin-left: 20px;

  margin-right: 20px;
}
.block {
  text-align: center;
}
.left {
  padding-left: 10px;
  box-sizing: border-box;
  width: 50%;
}
.el-form {
  display: flex;
}
.photo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  p {
    margin-left: 30px;
    margin-right: 50px;
  }
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 80px;
  height: 80px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.block {
  text-align: center;
}
</style>